<template>
  <div class="meun">
    <div class="title">
      <p>Click to continue browsing our CHINA (中文) site. If you’d like delivery elsewhere, please select your preferred country or language.</p>
      <div class="tittle-btn">
        <el-button class="tam">China(中文)</el-button>
        <el-button class="tan">CONTINUE</el-button>
      </div>
    </div>
    <div class="meun_nav">
      <div class="nav">
        <div class="nav_left">
          <a href="javascript:;">Ship To: Canada ($CAD) | EN</a>
          <a href="javascript:;">
            <span class="iconfont iconweizhidingwei"></span>
            <span>SSTORE LOCATOR</span>
          </a>
        </div>
        <div class="nav_center">
          <div class="nav-toggle">
            <span></span>
          </div>
          <div class="nav_title">
            <a href="#">CANADA GOOSE</a>
          </div>
          <div class="nav_submeun">
            <ul>
              <li>
                <a href="#" @mouseenter="handleMounseEnter">MEN</a>
              </li>
              <li>
                <a href="#" @mouseenter="handleMounseEnter">WOMEN</a>
              </li>
              <li>
                <a href="#" @mouseenter="handleMounseEnter">KIDS</a>
              </li>
              <li>
                <a href="#" @mouseenter="handleMounseEnter">OUR STORY</a>
              </li>
              <li>
                <a href="#" @mouseenter="handleMounseEnter">OUR PRODUCTS</a>
              </li>
              <li>
                <a href="#" @mouseenter="handleMounseEnter">FUR & DOWN</a>
              </li>
            </ul>
          </div>
        </div>
        <div class="nav_right">
          <a href="#" @click.prevent="goToShopSearch">
            <span class="iconfont iconsousuokuang"></span>
            <span>SEARCH</span>
          </a>
          <a href="#" @click.prevent="goToLogin">
            <span class="iconfont iconrenwu"></span>
            <span>SIGN IN</span>
          </a>
          <a href="#" @click.prevent="goToShop">
            <span class="iconfont icongouwudai"></span>
            <span>BAG</span>
          </a>
        </div>
      </div>
    </div>
    <MenuSubMenu :submeunflag="submeunflag" @mounse-leave="handleMounseLeave"></MenuSubMenu>
  </div>
</template>
<script>
import MenuSubMenu from "./MenuSubMenu";
export default {
  data() {
    return {
      submeunflag: false
    };
  },
  methods: {
    handleMounseEnter() {
      this.submeunflag = true;
    },
    handleMounseLeave(flag) {
      // console.log(flag);

      this.submeunflag = flag;
    },
    goToShop() {
      this.$router.push("/shopcart");
    },
    goToShopSearch() {
      this.$router.push("/shopsearch");
    },
    goToLogin() {
      this.$router.push("/login/enter");
    }
  },
  components: {
    MenuSubMenu
  }
};
</script>
<style lang="less" scoped>
@media screen and (max-width: 1024px) {
  @import url(../assets/css/mobile_meun.less);
}
@media screen and (min-width: 1024px) {
  @import url(../assets/css/pc_meun.less);
}
</style>